<template>
  <div>
    <h1>账单管理</h1>
    <div>
        <h2>添加新账单</h2>
        <span>类型：</span><span>支出</span><input type="radio" v-model="ifout" @click="choose_modle(0)"><span>收入</span><input type="radio" v-model="ifin" @click="choose_modle(1)">
        <span>金额：</span><input type="text" v-model="money">
        <span>类别：</span><input type="text" v-model="select">
        <span>备注：</span><input type="text" v-model="other">
        <span>日期：</span><input type="date" v-model="date">
        <button @click="add">添加账单</button>
    </div>
    <div>
        <h2>账单列表</h2>
        <div>
            <div>
                <div>ID</div><div>类型</div><div>金额(元)</div><div>类别</div><div>备注</div><div>日期</div><div>操作</div>
            </div>
            <div v-for="(item,index) in list" :key="index">
                <div>{{index+1}}</div><div>{{item.or}}</div><div>{{item.money}}</div><div>{{item.select}}</div><div>{{item.other}}</div><div>{{item.date}}</div><button @click="fn_delete(index)">删除</button>
            </div>
        </div>
    </div>
    <div>
        <h2>账单统计</h2>
        <span>总收入：{{ sumin }}元</span>
        <span>总支出：{{ sumout }}元</span>
        <span>结余：{{ sum }}元</span>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            num:0,
            ifout:false,
            ifin:false,
            money:0,
            select:'',
            other:'',
            date:'',
            list:[],
            sumin:0,
            sumout:0,
            sum:0
        }
    },
    methods:{
        choose_modle(index){
            if(index==0){
                this.ifout=true
                this.ifin=false
            }else{
                this.ifout=false
                this.ifin=true
            }
        },
        add(index){
            this.num++
            let or=''
            if(this.ifout){
                or='支出'
                for(let i=0;i<this.money;++i){
                    --this.sum
                    ++this.sumout
                }
            }else{
                or='收入'
                for(let i=0;i<this.money;++i){
                    ++this.sum
                    ++this.sumin
                }
            }
            this.list.unshift({
            id:index+1,
            or:or,
            money:this.money,
            select:this.select,
            other:this.other,
            date:this.date,
            })
            console.log(this.list)
        },
        fn_delete(index){
            this.list.filter(id=>)
        }
    }

}
</script>

<style>

</style>